<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择位置</title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		window._AMapSecurityConfig = {
			securityJsCode: "dba528dcd7d571a231a330b532a6cf61",
		};
	</script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=4fbb5ae31246fb4337678f7649c87b1b"></script>
	<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	<style type="text/css">
		#container{
			width: 782px;
			height: 440px;
			overflow: hidden;
		}
		.layui-form-item {
			margin-bottom: 0;
		}
		.layui-form-item {
			clear: both;
		}
		.layui-inline {
			margin-bottom: 5px;
			margin-right: 10px;
		}
		.layui-inline {
			vertical-align: middle;
		}
		.layui-inline {
			position: relative;
		}
		.layui-inline {
			display: inline-block;
		}
		.layui-input {
			display: block;
			width: 100%;
			padding-left: 10px;
		}
		.layui-input {
			height: 32px;
			line-height: 1.3;
			border-width: 1px;
			border-style: solid;
			background-color: #fff;
			border-radius: 2px;
		}
		.layui-btn {
			margin-left: 10px;
			transition: none;
		}
		.layui-btn {
			display: inline-block;
			height: 32px;
			line-height: 32px;
			background-color: #009688;
			color: #fff;
			white-space: nowrap;
			text-align: center;
			font-size: 12px;
			border: none;
			border-radius: 2px;
			cursor: pointer;
		}
		.layui-field-title {
			border-width: 1px 0 0;
		}

		.layui-elem-field {
			padding: 0;
			border-style: solid;
		}
		fieldset {
			display: block;
			margin-inline-start: 2px;
			margin-inline-end: 2px;
			padding-block-start: 0.35em;
			padding-inline-start: 0.75em;
			padding-inline-end: 0.75em;
			padding-block-end: 0.625em;
			min-inline-size: min-content;
		}
		.layui-elem-field legend {
			margin-left: 20px;
			padding: 0 10px;
			font-size: 12px;
			font-weight: 600;
		}
		legend {
			display: block;
			padding-inline-start: 2px;
			padding-inline-end: 2px;
			border-width: initial;
			border-style: none;
			border-color: initial;
			border-image: initial;
		}
	</style>
</head>
<body>
<div class="layui-form-item">
	<div class="layui-form-item">
		<div class="layui-inline">
			<input id="warehouseAddress" class="layui-input" type="text" placeholder="Enter address"/>
		</div>
		<div class="layui-inline">
			<button id="btnSearch" type="button" class="layui-btn" onclick="btnSearch()">Search</button>
			<button id="confirm" type="button" class="layui-btn" onclick="confirm()">Confirm</button>
		</div>
		<div class="layui-inline">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
				<legend>longitude：<span id="longitude">0</span></legend>
			</fieldset>
		</div>
		<div class="layui-inline">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
				<legend>latitude：<span id="latitude">0</span></legend>
			</fieldset>
		</div>
	</div>
	<!--	<div class="info" id="text">
            请用鼠标在地图上操作试试
        </div>-->
</div>
<div id='container'></div>
</body>
<script type="text/javascript">

	// 获取地址参数,String 转换为数字
	function GetUrlByParamName(name){
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		var URL =  decodeURI(window.location.search);
		var r = URL.substr(1).match(reg);
		if(r!=null){
			//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
			return  decodeURI(r[2]);
		};
		return null;
	};

	var warehouseAddress = GetUrlByParamName("warehouseAddress")
	var longitude = GetUrlByParamName("longitude")
	var latitude = GetUrlByParamName("latitude")
	$("#warehouseAddress").val(warehouseAddress)

	// 默认经纬度
	var defaultLongitude = 116.397428;
	var defaultLatitude = 39.90923;

	// 初始化地图对象，加载地图
	var map = new AMap.Map("container", {
		viewMode: '2D',
		zoom: 11,
		// center: [116.397428, 39.90923],
		resizeEnable: true
	});

	// 创建地理编码实例
	AMap.plugin("AMap.Geocoder", function () {
		geocoder = new AMap.Geocoder({
			radius: 1000, // 搜索半径
			extensions: "all", // 返回地址组成的所有要素
			async: false // 同步返回结果
		});
	})

	if ($("#warehouseAddress").val() != null && $("#warehouseAddress").val() != '') {
		btnSearch();
	}

	/*	// 检查经纬度是否为00
        if (longitude === "0" && latitude === "0") {
            longitude = defaultLongitude;
            latitude = defaultLatitude;
        }*/

	if(longitude != null && longitude != '' && longitude != 0 && latitude != null && latitude != '' && latitude != 0){
		console.log('longitude:'+longitude+'latitude:'+latitude)

		var lnglat = new AMap.LngLat(longitude, latitude);
		addMarkerAt(lnglat);
		map.setCenter(lnglat);

		$("#longitude").text(longitude)
		$("#latitude").text(latitude)
	} else if(warehouseAddress != null && warehouseAddress != ''){
		console.log('warehouseAddress:'+warehouseAddress)
		// 将地址解析结果显示在地图上，并调整地图视野
		geocoder.getAddress([longitude, latitude], function(status, result) {
			if (status === 'complete' && result.info === 'OK' && result.regeocode) {
				$warehouseAddress.val(result.regeocode.formattedAddress);
			} else {
				// 处理错误或没有结果的情况
				$text.text('地址查询失败');
			}
		});
	}


	// 使用 jQuery 选择 DOM 元素
	var $longitude = $('#longitude');
	var $latitude = $('#latitude');
	var $text = $('#text');
	var $warehouseAddress = $('#warehouseAddress');

	// 显示 地理位置 经纬度
	function showInfoClick(e) {
		var text = '您在 [ ' + e.lnglat.lng + ',' + e.lnglat.lat + ' ] 的位置单击了地图！';
		$longitude.text(e.lnglat.lng);
		$latitude.text(e.lnglat.lat);

		addMarkerAt(e.lnglat);

		// 根据经纬度获取地址名称
		geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) {
			if (status === 'complete' && result.info === 'OK' && result.regeocode) {
				$warehouseAddress.val(result.regeocode.formattedAddress);
			} else {
				// 处理错误或没有结果的情况
				$text.text('地址查询失败');
			}
		});
		$text.text(text);
	}
	// 绑定地图事件 触发showInfoClick方法
	map.on('click', showInfoClick);

	// 添加标记
	function addMarkerAt(lnglat) {
		// 清空地图上的所有标记
		map.clearMap();
		// 创建一个新的 Marker 实例：
		const marker = new AMap.Marker({
			position: lnglat, // 使用点击事件的经纬度
			title: "新位置",
			icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
			offset: new AMap.Pixel(-25, -60) // 根据图标实际位置调整偏移量
		});
		// 将创建的点标记添加到地图上
		map.add(marker);
	}


	//点击搜索
	function btnSearch(){
		// 根据地址名称获取经纬度
		geocoder.getLocation($("#warehouseAddress").val(), function (status, result) {
			if (status === "complete" && result.info === "OK") {
				console.log("status",status)
				console.log("result",result)
				// 访问第一个结果对象
				var firstResult = result.geocodes[0];
				// 提取格式化地址
				var formattedAddress = firstResult.formattedAddress;
				// 提取经纬度信息
				var location = firstResult.location;
				$longitude.text(location.lng);
				$latitude.text(location.lat);
				addMarkerAt(location);
				// 根据提取的经纬度更新地图中心点
				map.setCenter([location.lng, location.lat]);
			}else{
				alter("地址解析失败！");
			}
		});
	}



	function confirm(){
		parent.BasicWarehouseInfoDlg.data.warehouseAddress = $("#warehouseAddress").val();//地址
		parent.BasicWarehouseInfoDlg.data.longitude = $("#longitude").text();//经度
		parent.BasicWarehouseInfoDlg.data.latitude = $("#latitude").text();//维度
		var Index = parent.layer.getFrameIndex(window.name);
		parent.layer.close(Index);
	}

	//返回按钮
	function backupPage(){
		var Index = parent.layer.getFrameIndex(window.name);
		parent.layer.close(Index);
	}
	function showInfoDbClick(e) {
		var text = '您在 [ ' + e.lnglat.lng + ',' + e.lnglat.lat + ' ] 的位置双击了地图！';
		$text.text(text);
	}

	function showInfoMove(e) {
		var text = '您移动了您的鼠标！';
		$text.text(text);
	}

	map.on('dblclick', showInfoDbClick);
	map.on('mousemove', showInfoMove);

</script>
</html>
